<template>
  <div class="papers">
    <MyTabs :tab-list="tabList"></MyTabs>
    <div ref="imageTofile" class="papers-content" v-if="certDetail">
      <el-scrollbar class="papers-scrollbar">
        <div class="papers-content__main">
          <div class="title">
            {{ certDetail.cert_info.title }}
          </div>
          <div class="content" v-html="certDetail.cert_info.content"></div>
          <div class="course">
            <div class="item" v-for="(item, index) in certDetail.course_list" :key="index">
              {{ item.title }}
            </div>
          </div>
        </div>
      </el-scrollbar>
      <img
        class="chapter"
        :class="certDetail.cert_info.official_seal_place"
        :src="certDetail.cert_info.official_seal_base64"
        v-if="certDetail.cert_info.official_seal_place != 'none'"
        alt=""
      />
      <img class="bg" :src="certDetail.cert_info.background_base64" alt="" />
    </div>
    <div class="papers-footer">
      <el-button
        type="primary"
        size="small"
        v-if="certDetail"
        @click="convertToImage()"
        :loading="loadlog"
        >下载证书</el-button
      >
    </div>
  </div>
</template>
<script>
import html2canvas from 'html2canvas'
import MyTabs from '../components/myTab.vue'
export default {
  components: {
    MyTabs
  },
  data() {
    return {
      tabList: [
        {
          title: '我的证书'
        }
      ],
      certDetail: null,
      loadlog: false
    }
  },
  created() {
    this.getStudentCertDetail()
  },
  methods: {
    getStudentCertDetail() {
      this.$api.getCourseStudentCertDetail(
        {
          id: this.$route.params.id
        },
        res => {
          const { data } = res
          this.certDetail = data
        }
      )
    },
    // 生成快照
    async convertToImage(options = {}) {
      this.loadlog = true
      const container = this.$refs.imageTofile
      // 设置放大倍数
      const scale = window.devicePixelRatio
      // 传入节点原始宽高
      const _width = container.offsetWidth
      const _height = container.offsetHeight
      let { width, height } = options
      width = width || _width
      height = height || _height

      // html2canvas配置项
      const ops = {
        scale,
        width,
        height,
        scrollY: 0,
        scrollX: 0,
        useCORS: true,
        ...options
      }
      const canvas = await html2canvas(container, ops)
      const img = canvas.toDataURL('image/jpg')
      this.download(img, `zs${Date.now()}`)
    },
    // 下载
    download(href, name) {
      let eleLink = document.createElement('a')
      eleLink.download = name
      eleLink.href = href
      eleLink.click()
      eleLink.remove()
      this.loadlog = false
    }
  }
}
</script>
<style lang="scss" scoped>
.papers {
  .papers-scrollbar {
    height: 100%;
    ::v-deep .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
  .papers-content {
    width: 600px;
    height: 846px;
    margin: 15px auto 30px;
    padding: 100px 80px 80px;
    position: relative;
    box-sizing: border-box;
    &__main {
      position: relative;
      z-index: 2;
      .title {
        color: $text-color-import;
        font-size: 18px;
        text-align: center;
      }
      .content {
        margin-top: 20px;
        ::v-deep p {
          padding: 0;
          margin: 0;
        }
      }
      .course {
        margin-top: 30px;
        border: 1px solid #909399;
        border-top: 0;
        overflow: hidden;
        .item {
          padding: 8px 15px;
          color: $text-color-import;
          font-size: 12px;
          line-height: 1.5;
          text-align: center;
          border-top: 1px solid #909399;
        }
      }
    }
    .chapter {
      position: absolute;
      width: 96px;
      height: 96px;
      z-index: 2;
      &.right-top {
        right: 40px;
        top: 80px;
      }
      &.right-bottom {
        right: 40px;
        bottom: 80px;
      }
    }
    .bg {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 1;
    }
  }
  .papers-footer {
    margin-top: 30px;
    display: flex;
    justify-content: center;
  }
}
</style>
